<template>
	<view class="content">
		<listHead :only="only" :title='written'></listHead>
		<view class="top">
			<u-radio-group v-model="value" placement="row" activeColor="#7AD9DF !important"
				inactiveColor="#B0E9EC  !important">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name" :class="value==item.name?'clao':'clat'"
					@change="radioChange(item.name)">
				</u-radio>
			</u-radio-group>
			<u-cell-group :border="false">
				<u-cell>
					<view class="down-cell cell-grou" slot="title">
						<view class="cell-title titles">病历号</view>
						<view class="cell-title1">{{dataObj.mrn}}</view>
					</view>
					<view class="down-cell" style="flex: 1.1;" slot="value">
						<view class="cell-title titles">姓名</view>
						<view class="cell-title1">{{dataObj.pname}}</view>
					</view>
				</u-cell>
				<u-cell>
					<view class="down-cell cell-grou" slot="title">
						<view class="cell-title titles">性别</view>
						<view class="cell-title1">{{dataObj.psex=='M' ? '男':'女'}}</view>
					</view>
					<view class="down-cell" style="flex: 1.1;" slot="value">
						<view class="cell-title titles">科室</view>
						<view class="cell-title1">{{dataObj.deptid | ellipsis}}</view>
					</view>
				</u-cell>
				<u-cell arrow-direction="down">
					<view class="down-cell" slot="title">
						<view class="cell-title">申请内容</view>
						<view class="cell-title1">{{dataObj.remark}}</view>
					</view>
				</u-cell>
			</u-cell-group>
			<view class="ListOfPatients_BT">
				<view class="Patients_BT_title" v-html="list"></view>

			</view>
			<u-cell-group :border="false">
				<u-cell>
					<view class="down-cell cell-grou" slot="title">
						<view class="cell-title titles">医生</view>
						<view class="cell-title1">{{dataObj.dr}}</view>
					</view>
					<view class="down-cell" style="flex: 1.5;" slot="value">
						<view class="cell-title">日期</view>
						<view class="cell-title1">{{dataObj.indate}}</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import listHead from '../../components/html/listHead.vue'
	import {
		mapMutations,
		mapState
	} from "vuex";
	import {
		Consultation_Get_MX
	} from '../../api/user.js'
	export default {
		components: {
			listHead
		},
		data() {
			return {
				only: false,
				written: '6-19楼东区XS-会诊单',
				windowWidth: '',
				radiolist1: [{
						name: '发出申请',
						disabled: false,
					},
					{
						name: '收到回复',
						disabled: false,
					}
				],
				value: '',
				list: [],
				dataObj: {}
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'passObj', 'sheetObj'])
		},
		onLoad(data) {
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.windowWidth = res.windowWidth;
				}
			});
			this.value = data.id == 0 ? '发出申请' : '收到回复'
			_this.Consultation_Get_MXFun()
		},
		filters: {
			//文字数超出时，超出部分使用...
			ellipsis(value) {
				if (!value) return ''
				if (value.length > 5) {
					return value.slice(0, 5) + '...'
				}
				return value
			}
		},
		methods: {
			TabsChange(e) {
				this.currentTabIndex = e.index
				this.Consultation_Get_MXFun()
			},
			radioChange(e) {
				this.value = e
				this.Consultation_Get_MXFun()
			},
			Consultation_Get_MXFun() {
				try {
					uni.showLoading({
						title: '加载中...', //显示的文字
						// duration: 3000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					const user = uni.getStorageSync('userInfo')
					this.dataObj = uni.getStorageSync('sheetObj')
					// console.log(this.dataObj);
					const data = {
						HosKind: user.hoscode,
						rdn: this.value.slice(0, 2) == '发出' ? this.dataObj.rdn : this.dataObj.relano,
						mrn: this.dataObj.mrn,
						series: this.dataObj.series,
						sType: this.value.slice(0, 2),
					}
					this.$http.Consultation_Get_MX(data).then((res) => {
						console.log(res);
						if (res[0]?.precode) {
							this.list = res[0].precode.replace(/\r\n/g, "<br/>")
							uni.hideLoading();

						} else {
							this.list = ''
							uni.hideLoading();
						}

					})
				} catch (e) {
					//TODO handle the exception
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.down-cell {
		display: flex;
		align-items: center;

		.titles {
			text-align-last: justify;
			text-align: justify;
			text-justify: inter-ideograph;
			width: 64px;
		}

		.cell-title {
			font-size: 16px;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #9F9F9F;
			line-height: 24px;
			padding-left: 6px;
			white-space: nowrap;
		}

		.cell-title1 {
			margin-left: 10px;
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			// color: #008FE2;
			line-height: 24px;
		}
	}

	.ListOfPatients_BT {
		// width: 100%;
		// height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		// padding-top: 10px;
		padding: 0 16px 10px;
		// margin-top: 166px;
		padding-bottom: 0px;
		height: calc(100% - 274px);
		overflow-y: scroll;


		// height: 100%;
		.Patients_BT_title {
			font-size: 15px;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #333333;
			line-height: 23px;
			height: calc(100vh - 285px);

		}
	}

	::v-deep .u-tabs__wrapper__nav__line {
		background: #7AD9DF !important;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 16px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #2F7378 !important;
		line-height: 24px;
	}

	::v-deep .u-radio-group--row {
		justify-content: space-around;
	}

	::v-deep .u-radio__icon-wrap--circle {
		width: 26px !important;
		height: 26px !important;
		background-color: #B0E9EC !important;
		// border-color:  #7AD9DF  !important;
	}

	::v-deep .u-radio-group--row {
		margin-top: 10px;
	}

	.clao ::v-deep {
		.u-icon__icon {
			border-radius: 50%;
			background: #FEFF87;
			color: #FEFF87 !important;
			width: 13px;
			height: 13px;
		}
	}

	.clat ::v-deep {
		.u-icon__icon {
			border-radius: 50%;
			background: #FFFFFF;
			width: 13px;
			height: 13px;
		}
	}

	::v-deep .u-form-item__body {
		margin: -5px 0 0 0;

	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: space-between;
	}

	::v-deep .u-cell-group {
		padding: 0 10px;
		margin-top: 10px;

		.u-cell__body {
			padding: 12rpx 0rpx !important;
		}

		.u-line {
			border-bottom: 1px solid rgba(214, 215, 217, 0.5) !important;
		}
	}
</style>
